<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>5K Run</title>
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
		<!-- Bootstrap-->
		{% include "component/bootstrap.html" %}
		<!-- Bootstrap -->
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="span12">
					<!-- header -->
					<div class="row">
						<div class="span12">
							<div class="hero-unit hero-unit-custom">
								<h1>5K Run</h1>
								<p>run for fun, run for health</p>
								<p>
								{% if new_user %}
								<a class="btn btn-primary btn-large" data-toggle="modal" href="#authdlg" data-keyboard="true">
								  Join us >>
								</a>
								{% endif %}
								{% if old_user %}
								<a class="btn btn-primary btn-large">
								  Hi, {{ username }}
								</a>
								{% endif %}
								</p>
							</div>
						</div>
						<!-- image carousel
						<div class="span9 span-custom-noleftmargin ">
							<div id="myCarousel" class="carousel slide carousel-custom">
								<div class="carousel-inner">
									<div class="item customImg active">
										<img src="https://sites.google.com/site/5krundata/file/1.jpg" alt>
									</div>
									<div class="item customImg">
										<img src="https://sites.google.com/site/5krundata/file/2.jpg" alt>
									</div>
									<div class="item customImg ">
										<img src="https://sites.google.com/site/5krundata/file/3.jpg" alt>
									</div>
									<div class="item customImg ">
										<img src="https://sites.google.com/site/5krundata/file/4.jpg" alt>
									</div>
									<div class="item customImg ">
										<img src="https://sites.google.com/site/5krundata/file/5.jpg" alt>
									</div>
									<div class="item customImg ">
										<img src="https://sites.google.com/site/5krundata/file/6.jpg" alt>
									</div>
								</div>
								<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
								<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
							</div>
						</div>
						-->
					</div>
					<!-- nav bar -->
					{% include "component/nav.html" %}
					<!-- content -->
					<div class="row">
						<div class="span6">
							<div class="page-header">
								<small>News</small>
							</div>
						</div>
						<div class="span6">
							<div class="page-header">
								<small>Events</small>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		$(function(){$('#customImg.img').height( $('#hero-unit').outerHeight(true) )});
		function submitlogout()
		{
			document.forms['logoutForm'].submit();
		}
	</script>
	<script src="{{ validate_form_js }}"></script>
</html>
